<template>
  <div class="user-center h100 float-right cc-display pd020p">
    <img src="./default.png" class="h40p w40p br20p" />
    <span class="white fs18 ls2 mgl10p" @click="fnLogin">{{
      state.userName
    }}</span>
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { localStore, localData } from "/@/http/store.js";

export default {
  // 子组件
  components: {},
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件抛出组
  emits: ["answer-all"],
  setup(props, { emit }) {
    // 路由
    const { push } = useRouter();
    const userInfo = localData("user");
    // 双向绑定数据
    const state = reactive({
      userName: userInfo ? userInfo.userName : "未登录",
    });
    // 回传父组件
    const fnLogin = () => {
      if (state.userName === "未登录") return push("/login");
      alert("1");
    };
    // 监听父组件传值变化
    watch(
      () => props.msg,
      (newValue) => {
        if (newValue.from === "Login" && newValue.code === "success") {
          state.userName = newValue.msg;
        }
      }
    );
    // 传入模板
    return {
      state,
      fnLogin,
    };
  },
};
</script>

<style scoped>
.user-center:hover {
  cursor: pointer;
}
</style>
